// @ts-ignore
import { PageContainer } from '@ant-design/pro-components';
// @ts-ignore
import { Button, Card, Image } from 'antd';
// @ts-ignore
import { React, useCallback, useEffect, useState } from 'react';

import { AllProductInfo } from '@/services/ant-design-pro/api';
import { history } from '@umijs/max';
import './PetLandingPage.less';

const PetLandingPage: React.FC = () => {
  const [petList, setPetList] = useState<API.ALLProductInfo>({});
  const getPetList = async () => {
    try {
      const res = await AllProductInfo();
      if (res.data) {
        setPetList(res);
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    getPetList().then();
  }, []);

  const clickForDetail = useCallback((id: number) => {
    history.push(`/pet/detail/${id}`);
  }, []);

  return (
    <PageContainer>
      {petList.data &&
        petList.data.map((pet, index) => (
          <Card key={index}>
            <Image
              style={{
                float: 'left',
                height: '200px',
                width: '300px',
              }}
              src={pet.imgUrl}
            ></Image>

            <div
              style={{
                float: 'right',
                width: '75%',
              }}
            >
              <div
                className={'infoBox'}
                style={{
                  float: 'left',
                }}
              >
                <b>{pet.name}</b> <br />
                <p>宠物编号：{pet.productId}</p>
                <p className={'score'}> 了解宠物：{pet.descn}</p>
              </div>

              <div
                className={'buttonBox'}
                style={{
                  float: 'right',
                  marginTop: '20px',
                }}
              >
                <Button
                  type={'primary'}
                  className={'myButton'}
                  onClick={() => clickForDetail(Number(pet.name))}
                >
                  查看详情
                </Button>{' '}
                <br />
              </div>
            </div>
          </Card>
        ))}
    </PageContainer>
  );
};
export default PetLandingPage;
